<template>
    <!-- #ifndef APP-NVUE -->
    <view class="uni-list uni-border-top-bottom" :style="customStyle">
        <view v-if="border" class="uni-list--border-top"></view>
        <slot />
        <view v-if="border" class="uni-list--border-bottom"></view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <list
        :bounce="false"
        :scrollable="true"
        show-scrollbar
        :render-reverse="renderReverse"
        @scroll="scroll"
        class="uni-list"
        :class="{ 'uni-list--border': border }"
        :enableBackToTop="enableBackToTop"
        loadmoreoffset="15"
    >
        <slot />
    </list>
    <!-- #endif -->
</template>

<script lang="ts">
/**
 * List 列表
 * @description 列表组件
 * @property {String} 	border = [true|false] 		标题
 */
export default {
    name: 'mList',
    'mp-weixin': {
        options: {
            multipleSlots: false
        }
    },
    props: {
        stackFromEnd: {
            type: Boolean,
            default: false
        },
        enableBackToTop: {
            type: [Boolean, String],
            default: false
        },
        scrollY: {
            type: [Boolean, String],
            default: false
        },
        border: {
            type: Boolean,
            default: true
        },
        renderReverse: {
            type: Boolean,
            default: false
        },
        customStyle: {
            type: [Object, String]
        },
        width: {
            type: String,
            default: 'auto'
        },
        bgColor: {
            type: String,
            default: 'unset'
        }
    },
    // provide() {
    // 	return {
    // 		list: this
    // 	};
    // },
    created() {
        Object.assign(this, { firstChildAppend: false })
    },
    methods: {
        loadMore() {
            this.$emit('scrolltolower')
        },
        scroll(e: any) {
            this.$emit('scroll', e)
        }
    }
}
</script>
<style lang="scss">
$uni-border-color: #e5e5e5;

.uni-list {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    background-color: v-bind(bgColor);
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
    width: v-bind(width);
}

.uni-list--border {
    position: relative;
    /* #ifdef APP-NVUE */
    border-top-color: $uni-border-color;
    border-top-style: solid;
    border-top-width: 1rpx;
    border-bottom-color: $uni-border-color;
    border-bottom-style: solid;
    border-bottom-width: 1rpx;
    /* #endif */
    z-index: -1;
}

/* #ifndef APP-NVUE */

.uni-list--border-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
    z-index: 1;
}

.uni-list--border-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    background-color: $uni-border-color;
}

/* #endif */
</style>
